<template>
    <v-container fluid>
        <v-dialog v-model="dialogDelete" max-width="500px">
            <v-card>
                <v-card-title class="headline">确定删除此条记录?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                    <v-btn color="blue darken-1" text>确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-toolbar flat>
            <v-dialog v-model="dialogEdit">
                <template v-slot:activator="{ on, attrs }">
                    <v-btn color="primary"
                           class="ma-2 white--text"
                           v-bind="attrs"
                           v-on="on">
                        <v-icon left>
                            mdi-plus
                        </v-icon>
                        新增
                    </v-btn>
                </template>
                <v-card>
                    <v-card-title>
                        <span class="headline">修改</span>
                    </v-card-title>
                    <v-card-text>
                        <v-form>
                            <v-text-field
                                    v-model="editedItem.description"
                                    label="菜单名称"></v-text-field>
                            <v-menu
                                    ref="menu"
                                    v-model="menusMenu"
                                    :close-on-content-click="false"
                                    transition="scale-transition"
                                    offset-y
                                    max-height="200">
                                <template v-slot:activator="{ on, attrs }">
                                    <v-text-field
                                            :value="editedItem.parent[0].description"
                                            label="上级菜单"
                                            readonly
                                            v-bind="attrs"
                                            v-on="on"
                                    ></v-text-field>
                                </template>
                                <v-treeview
                                        :items="menus"
                                        item-text="description"
                                        class="white"
                                        activatable
                                        return-object
                                        :active.sync="editedItem.parent">
                                </v-treeview>
                            </v-menu>
                            <v-text-field
                                    v-model="editedItem.url"
                                    label="菜单路径"></v-text-field>
                            <v-text-field
                                    v-model="editedItem.path"
                                    label="前端控件"></v-text-field>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="close">
                                Cancel
                            </v-btn>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="save">
                                Save
                            </v-btn>
                        </v-form>
                    </v-card-text>
                </v-card>
            </v-dialog>

            <v-btn color="error" class="ma-2 white--text" v-if="selection.length!=0">
                <v-icon left>
                    mdi-delete
                </v-icon>
                批量删除
            </v-btn>
        </v-toolbar>
        <v-treeview
                selectable
                v-model="selection"
                :items="menus"
                item-text="description"
                selection-type="independent">
            <!-- slot-scope(要配合slot)属性被废弃但是为了控制台不打印警告，暂时用slot-scope -->
            <!-- <template v-slot:append> -->
            <template slot="append" slot-scope="slotProps">
                <v-btn icon @click="editMenu(slotProps.item)">
                    <v-icon>
                        mdi-pencil
                    </v-icon>
                </v-btn>
                <v-btn icon @click="delMenu(slotProps.item)">
                    <v-icon>
                        mdi-delete
                    </v-icon>
                </v-btn>
            </template>
        </v-treeview>
    </v-container>
</template>

<script>
    export default {
        name: "MenuManage",
        data: () => ({
            dialogDelete: false,
            dialogEdit: false,
            menusMenu: false,
            menus: [],
            selection: [],
            editedIndex: -1,
            editedItem: {
                id: '',
                url: '',
                path: '',
                icon: '',
                type: '',
                parent: [{description: ''}],
                description: ''
            },
            defaultItem: {
                id: '',
                url: '',
                path: '',
                icon: '',
                type: '',
                parent: [{description: ''}],
                description: ''
            }
        }),
        created() {
            this.initialize()
        },
        methods: {
            initialize() {
                this.$axios.get('menu').then(response => {
                    this.menus = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            addMenu() {

            },
            batchDelMenus() {

            },
            editMenu(item) {
                this.editedIndex = this.menus.indexOf(item);
                this.editedItem = Object.assign(this.editedItem, item);
                this.dialogEdit = true
            },
            delMenu(item) {
                this.editedItem = Object.assign(this.editedItem, item)
                this.dialogDelete = true
            },
            close() {
                this.dialogEdit = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },
            closeDelete() {
                this.dialogDelete = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },
            save() {

            }
        },
        watch: {
            editedItem: {
                deep: true,
                handler: function () {
                    this.menusMenu = false
                }
            }
        }
    }
</script>

<style scoped>

</style>